<div dial-step class="step dial-step panel panel-default">
	<div class="panel-heading">
		<step-heading></step-heading>
	</div>
	<div class="panel-body" ng-hide='step.iface.isCollapsed'>
		<div class='row'>
			<div class='noun-toolbox col-md-12 form-group'>
				<div basic-draggable drop-target='.dial-nouns' class="dial-noun dial-noun-number label label-default rvd-pickable"><i class='fa fa-phone'></i> &nbsp;{{'dialStepNumberLabel' | translate}}</div>
				<div basic-draggable drop-target='.dial-nouns' class="dial-noun dial-noun-client label label-default rvd-pickable"><i class='fa fa-user'></i> &nbsp;{{'dialStepClientLabel' | translate}}</div>
				<div basic-draggable drop-target='.dial-nouns' class="dial-noun dial-noun-conference label label-default rvd-pickable"><i class='fa fa-group'></i> &nbsp;{{'dialStepConcefenceLabel' | translate}}</div>
				<div basic-draggable drop-target='.dial-nouns' class="dial-noun dial-noun-sipuri label label-default rvd-pickable">{{'dialStepSipUriLabel' | translate}}</div>
			</div>
		</div>

		<div class='row'>
			<div class='col-md-12'>
				<div basic-sortable list-model='step.dialNouns' class='dial-nouns form-group' ng-class="{'drop-area':step.dialNouns.length==0}" item-added='addDialNoun'>

					<div ng-repeat='dialnoun in step.dialNouns'>

						<!-- Number noun -->
						<div ng-if="dialnoun.dialType=='number'" class="number-noun form-group">
							<div lookup-context class="input-group input-group-sm">
								<span class="input-group-addon rvd-handle"><i class='fa fa-phone'></i></span>
								<div class="fac-warning-wrap input-group-sm">
									<input ng-model='dialnoun.destination' lookup-target type='text' class='form-control' placeholder="{{'dialStepNumberDestinationInputPlaceholder' | translate}}" tooltip="{{'dialStepNumberDestinationInputTooltip' | translate}}">
									<fac-warning monitor="dialnoun.destination" validator="outboundPSTN" blocked-message="{{facWarning.message}}"></fac-warning>
								</div>
								<variable-lookup variable="dialnoun.destination" view="input-group"></variable-lookup>

								<span ng-show='dialnoun.iface.advancedShown' class="input-group-addon" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'dialStepNumberSendDigitsTooltip' | translate}}">{{'dialStepNumberSendDigitsLabel' | translate}}</span>
								<input ng-model='dialnoun.sendDigits' auto-clear ng-show='dialnoun.iface.advancedShown'  type='text' class='form-control' placeholder="{{'dialStepNumberSendDigitsInputPlaceholder' | translate}}" >

								<span ng-show='dialnoun.iface.advancedShown' class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'dialStepNumberBeforeConnectTooltip' | translate}}'">{{'dialStepNumberBeforeConnectLabel' | translate}}</span>
								<select ng-show='dialnoun.iface.advancedShown' auto-clear sync-modules name='beforeConnectModule' ng-model='dialnoun.beforeConnectModule' ng-options='target.name as target.label for target in getAllTargets()' class="form-control">
									<option value=""></option>
								</select>

								<div class="validation-error" ng-show="form.next.$invalid">{{'dialStepNumberChooseTargetLabel' | translate}}</div>

								<span  class="input-group-addon fa fa-cog btn-default rvd-clickable" ng-click="dialnoun.iface.advancedShown = !dialnoun.iface.advancedShown"></span>
								<span class="input-group-addon fa fa-times btn-danger rvd-clickable" ng-click="removeDialNoun(step,dialnoun)"></span>
							</div>
							<div ng-show='dialnoun.iface.advancedShown' class="input-group input-group-sm noun-advanced">
								<span class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'statusCallbackInfo' | translate}}">{{'statusCallback' | translate}}</span>
								<module-url-picker type="module" url="dialnoun.statusCallback" module="dialnoun.statusCallbackModule"></module-url-picker>
							</div>
						</div>

						<!-- Client noun -->
						<div ng-if="dialnoun.dialType=='client'" class="form-group client-noun">
							<div lookup-context class="input-group input-group-sm">
								<span class="input-group-addon rvd-handle"><i class='fa fa-user'></i></span>
								<input ng-model='dialnoun.destination' lookup-target type='text' class='form-control' placeholder="{{'dialStepClientDestinationInputPlaceholder' | translate}}" tooltip="{{'dialStepClientDestinationInputTooltip' | translate}}">
								<variable-lookup variable="dialnoun.destination" view="input-group"></variable-lookup>

								<span ng-show='dialnoun.iface.advancedShown' class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'dialStepNumberBeforeConnectTooltip' | translate}}">{{'dialStepNumberBeforeConnectLabel' | translate}}</span>
								<select ng-show='dialnoun.iface.advancedShown' auto-clear sync-modules name='beforeConnectModule' ng-model='dialnoun.beforeConnectModule' ng-options='target.name as target.label for target in getAllTargets()' class="form-control">
									<option value=""></option>
								</select>

								<div class="validation-error" ng-show="form.next.$invalid">{{'dialStepClientChooseTargetLabel' | translate}}</div>

								<span  class="input-group-addon fa fa-cog btn-default rvd-clickable" ng-click="dialnoun.iface.advancedShown = !dialnoun.iface.advancedShown"></span>
								<span class="input-group-addon fa fa-times  btn-danger rvd-clickable" ng-click="removeDialNoun(step,dialnoun)"></span>
							</div>

							<div ng-show="videoSupport" class="input-group input-group-sm noun-advanced">
								<span class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'videoEnableHint' | translate}}"><strong>{{'Video' | translate}}</strong></span>
								<select ng-model="dialnoun.enableVideo" auto-clear ng-options='pair.value as pair.caption for pair in yesNoBooleanOptions' class="form-control mask-invalid">
									<option value=""></option>
								</select>

								<span ng-show="dialnoun.enableVideo" class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'videoResolutionHint' | translate}}">{{'Resolution' | translate}}</span>
								<select ng-model="dialnoun.videoResolution" ng-show="dialnoun.enableVideo" auto-clear class="mask-invalid form-control">
									<option value=""></option>
									<option value="CIF">CIF</option>
									<option value="4CIF">4CIF</option>
									<option value="16CIF">16CIF</option>
									<option value="QCIF">QCIF</option>
									<option value="VGA">VGA</option>
									<option value="720p">720p</option>
								</select>

								<span ng-show="dialnoun.enableVideo" class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'videoOverlayHint' | translate}}">{{'Overlay' | translate}}</span>
								<input ng-model="dialnoun.videoOverlay" ng-show="dialnoun.enableVideo" auto-clear class="mask-invalid form-control">
							</div>

							<div ng-show='dialnoun.iface.advancedShown' class="input-group input-group-sm noun-advanced">
								<span class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'statusCallbackInfo' | translate}}">{{'statusCallback' | translate}}</span>
								<module-url-picker url="dialnoun.statusCallback" module="dialnoun.statusCallbackModule"></module-url-picker>
							</div>

						</div>

						<!-- Conference noun -->
						<div ng-if="dialnoun.dialType=='conference'" conference-dial-noun class='form-group conference-noun'>
							<div lookup-context class="input-group input-group-sm">
								<span class="input-group-addon rvd-handle"><i class='fa fa-group'></i></span>
								<input ng-model='dialnoun.destination' lookup-target type='text' class='form-control' placeholder="{{'dialStepConferenceInputPlaceholder' | translate}}" tooltip="{{'dialStepConferenceInputTooltip' | translate}}">
								<variable-lookup variable="dialnoun.destination" view="input-group"></variable-lookup>
								<span  class="input-group-addon fa fa-cog btn-default rvd-clickable" ng-click="dialnoun.iface.advancedShown = !dialnoun.iface.advancedShown"></span>
								<span class="input-group-addon fa fa-times btn-danger rvd-clickable" ng-click="removeDialNoun(step,dialnoun)"></span>
							</div>

							<div ng-show="videoSupport" class="input-group input-group-sm noun-advanced">
								<span class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'videoEnableHint' | translate}}"><strong>{{'Video' | translate}}</strong></span>
								<select ng-model="dialnoun.enableVideo" auto-clear ng-options='pair.value as pair.caption for pair in yesNoBooleanOptions' class="form-control mask-invalid">
									<option value=""></option>
								</select>
								<span ng-show="dialnoun.enableVideo" class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'videoModeHint' | translate}}">{{'Mode' | translate}}</span>
								<select ng-model="dialnoun.videoMode" ng-show="dialnoun.enableVideo" auto-clear class="form-control mask-invalid">
									<option value=""></option>
									<option value="mcu">MCU</option>
									<option value="sfu">SFU</option>
								</select>
								<span ng-show="dialnoun.enableVideo" class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'videoResolutionHint' | translate}}">{{'Resolution' | translate}}</span>
								<select ng-model="dialnoun.videoResolution" ng-show="dialnoun.enableVideo" auto-clear class="mask-invalid form-control">
									<option value=""></option>
									<option value="CIF">CIF</option>
									<option value="4CIF">4CIF</option>
									<option value="16CIF">16CIF</option>
									<option value="QCIF">QCIF</option>
									<option value="VGA">VGA</option>
									<option value="720p">720p</option>
								</select>
								<span ng-show="dialnoun.enableVideo" class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'videoLayoutHint' | translate}}">{{'Layout' | translate}}</span>
								<select ng-model="dialnoun.videoLayout" ng-show="dialnoun.enableVideo" auto-clear class="mask-invalid form-control">
									<option value=""></option>
									<option value="linear">linear</option>
									<option value="tile">tile</option>
								</select>
								<span ng-show="dialnoun.enableVideo" class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'videoOverlayHint' | translate}}">{{'Overlay' | translate}}</span>
								<input ng-model="dialnoun.videoOverlay" ng-show="dialnoun.enableVideo" auto-clear class="mask-invalid form-control">
							</div>

							<div ng-show='dialnoun.iface.advancedShown' class="input-group input-group-sm noun-advanced">
								<span class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'dialStepConferenceMutedTooltip' | translate}}">{{'dialStepConferenceMutedLabel' | translate}}</span>
								<select ng-model='dialnoun.muted' auto-clear ng-options='pair.value as pair.caption for pair in yesNoBooleanOptions' class="form-control">
									<option value=''></option>
								</select>

								<span class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'dialStepConferenceBeepTooltip' | translate}}">{{'dialStepConferenceBeepLabel' | translate}}</span>
								<select ng-model='dialnoun.beep' auto-clear ng-options='pair.value as pair.caption for pair in yesNoBooleanOptions' class="form-control">
									<option value=''></option>
								</select>

								<span class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'dialStepConferenceStartTooltip' | translate}}">{{'dialStepConferenceStartLabel' | translate}}</span>
								<select ng-model='dialnoun.startConferenceOnEnter' auto-clear ng-options='pair.value as pair.caption for pair in yesNoBooleanOptions' class="form-control">
									<option value=''></option>
								</select>

								<span class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'dialStepConferenceEndTooltip' | translate}}">{{'dialStepConferenceEndLabel' | translate}}</span>
								<select ng-model='dialnoun.endConferenceOnExit' auto-clear ng-options='pair.value as pair.caption for pair in yesNoBooleanOptions' class="form-control">
									<option value=''></option>
								</select>

								<span class="input-group-addon help-tooltip"  tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'dialStepConferenceMaxTooltip' | translate}}">{{'dialStepConferenceMaxLabel' | translate}}</span>
								<input ng-model='dialnoun.maxParticipants' auto-clear type='number' class='form-control' placeholder="{{'dialStepConferenceMaxPlaceholder' | translate}}">

							</div>
							<div ng-show='dialnoun.iface.advancedShown' class="input-group input-group-sm noun-advanced">
								<span class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'dialStepConferenceWaitTooltip' | translate}}">{{'dialStepConferenceWaitLabel' | translate}}</span>
								<div class="input-group-btn">
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{getWaitType()}} <span class="caret"></span></button>
									<ul class="dropdown-menu">
										<li><a href ng-click="setWaitType('URL')"><span class="fa fa-check" ng-show="getWaitType() === 'URL'"></span> URL</a></li>
										<li><a href ng-click="setWaitType('Module')"><span class="fa fa-check" ng-show="getWaitType() === 'Module'"></span> Module</a></li>
									</ul>
								</div>
								<input ng-show='getWaitType() == "URL"' ng-model='dialnoun.waitUrl' type='test' class="form-control">
								<select ng-show='getWaitType() == "Module"' sync-modules auto-clear name='waitModule' ng-model='dialnoun.waitModule' ng-options='target.name as target.label for target in getAllTargets()' class="form-control">
									<option value=""></option>
								</select>
								<div ng-show='getWaitType() == "URL"' class='input-group-btn'>
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Audio resources <span class="caret"></span></button>
									<ul class="dropdown-menu">
										<li ng-repeat='wav in project.wavList'><a ng-click='chooseProjectWav(wav)' href><span>{{wav.filename}}</span></a></li>
									</ul>
								</div>
							</div>

						</div>

						<!-- SipURI noun -->
						<div ng-if="dialnoun.dialType=='sipuri'" class="sipuri-noun form-group">
							<div lookup-context class="input-group input-group-sm">
								<span class="input-group-addon rvd-handle">{{'dialStepSipUriInputLabel' | translate}}</span>
								<input ng-model='dialnoun.destination' lookup-target type='text' class='form-control' placeholder="{{'dialStepSipUriInputPlaceholder' | translate}}" tooltip="{{'dialStepSipUriInputTooltip' | translate}}">
								<variable-lookup variable="dialnoun.destination" view="input-group"></variable-lookup>
								<span  class="input-group-addon fa fa-cog btn-default rvd-clickable" ng-click="dialnoun.iface.advancedShown = !dialnoun.iface.advancedShown"></span>
								<span class="input-group-addon fa fa-times btn-danger rvd-clickable" ng-click="removeDialNoun(step,dialnoun)"></span>
							</div>

							<div ng-show="videoSupport" class="input-group input-group-sm noun-advanced">
								<span class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'videoEnableHint' | translate}}"><strong>{{'Video' | translate}}</strong></span>
								<select ng-model="dialnoun.enableVideo" auto-clear ng-options='pair.value as pair.caption for pair in yesNoBooleanOptions' class="form-control mask-invalid">
									<option value=""></option>
								</select>

								<span ng-show="dialnoun.enableVideo" class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'videoResolutionHint' | translate}}">{{'Resolution' | translate}}</span>
								<select ng-model="dialnoun.videoResolution" ng-show="dialnoun.enableVideo" auto-clear class="mask-invalid form-control">
									<option value=""></option>
									<option value="CIF">CIF</option>
									<option value="4CIF">4CIF</option>
									<option value="16CIF">16CIF</option>
									<option value="QCIF">QCIF</option>
									<option value="VGA">VGA</option>
									<option value="720p">720p</option>
								</select>

								<span ng-show="dialnoun.enableVideo" class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'videoOverlayHint' | translate}}">{{'Overlay' | translate}}</span>
								<input ng-model="dialnoun.videoOverlay" ng-show="dialnoun.enableVideo" auto-clear class="mask-invalid form-control">
							</div>

							<div ng-show='dialnoun.iface.advancedShown' class="input-group input-group-sm noun-advanced">
								<span class="input-group-addon help-tooltip" tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'statusCallbackInfo' | translate}}">{{'statusCallback' | translate}}</span>
								<module-url-picker url="dialnoun.statusCallback" module="dialnoun.statusCallbackModule"></module-url-picker>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>

		<div class='row'>
			<div class="col-md-12">
				<div lookup-context class="input-group form-group">
					<span class="input-group-addon help-tooltip"  tooltip-trigger='mouseenter' tooltip-popup-delay='1000' tooltip="{{'dialStepContinueTooltip' | translate}}">{{'dialStepContinueLabel' | translate}}</span>
					<select auto-clear ng-model='step.nextModule' sync-modules name='nextModule' ng-options='target.name as target.label for target in getAllTargets()' class="form-control"  style="min-width:140px;">
						<option value=""></option>
					</select>
					<!-- <div class="validation-error" ng-show="form.next.$invalid">Choose a target</div>  -->

					<span  ng-show='step.iface.advancedShown' class="input-group-addon help-tooltip"  tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'dialStepContinueTimeoutTooltip' | translate}}">{{'dialStepContinueTimeoutLabel' | translate}}</span>
					<input ng-show='step.iface.advancedShown' ng-model='step.timeout' auto-clear type='number' class='form-control small-input' placeholder="{{'dialStepContinueTimeoutInputPlaceholder' | translate}}">

					<span ng-show='step.iface.advancedShown' class="input-group-addon help-tooltip"  tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'dialStepContinueTimeLimitTooltip' | translate}}">{{'dialStepContinueTimeLimitLabel' | translate}}</span>
					<input ng-show='step.iface.advancedShown' ng-model='step.timeLimit' auto-clear type='number' class='form-control small-input' placeholder="{{'dialStepContinueTimeLimitInputPlaceholder' | translate}}">

					<span ng-show='step.iface.advancedShown' class="input-group-addon help-tooltip"  tooltip-popup-delay="1000" tooltip-trigger="mouseenter" tooltip="{{'dialStepContinueCalledIdTooltip' | translate}}">{{'dialStepContinueCalledIdLabel' | translate}}</span>
					<input ng-show='step.iface.advancedShown' ng-model='step.callerId' lookup-target auto-clear type='text' class='form-control'>
					<variable-lookup ng-show='step.iface.advancedShown' variable="step.callerId" view="input-group"></variable-lookup>

					<span  class="input-group-addon fa fa-cog btn-default rvd-clickable" ng-click="step.iface.advancedShown = !step.iface.advancedShown"></span>
				</div>
			</div>
		</div>

		<div class='row'>
			<div  class="col-md-12 form-group">
				<div class="input-group">
					<span class="input-group-addon">{{'dialStepRecordingLabel' | translate}}</span>
					<select ng-model='step.record' auto-clear ng-options='pair.value as pair.caption for pair in yesNoBooleanOptions' class="form-control">
						<option value=''></option>
					</select>
				</div>
				<div>
					<div class="validation-warning" ng-show="step.record==true && dialContainsConference(step)">{{'dialStepRecordingConferenctWarning' | translate}}</div>
				</div>
			</div>
		</div>
	</div>
